<template>
    <div class="Dialogcontainer"
    :class="[sender ? 'rightContainer':'leftContainer']"
        >

        <template v-if="sender">
                <div class="dialogOption" ref="leftOption" :class="[appear ? 'appear' : '']">
                    <span class="functionOption"><el-icon><Delete /></el-icon></span>
                </div>
                <div class="dialogOptionBoard" ref="leftButtonOption" @click="optionCheck()"><el-icon><MoreFilled /></el-icon></div>
        </template>
        <div class="dialogBoard"
        :class="[sender ? 'rightForm':'leftForm',errorIf ? 'error' : '']"
            >
        <span >{{ props.value }}</span>
        </div>
        <template v-if="!sender">
            <div class="dialogOptionBoard" ref="RightButtonOption" @click="optionCheck()"><el-icon><MoreFilled /></el-icon></div>
            <div class="dialogOption" ref="RightOption" :class="[appear ? 'appear' : '']">
                    <span class="functionOption"><el-icon @click="audioPlay(props.value)"><VideoPlay /></el-icon></span>
                    <span class="functionOption"><el-icon><Delete /></el-icon></span>
            </div>
        </template>
        

    </div>

</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from 'vue'
import audioManager from '../utils/AudioManager';



const appear=ref(false)
const leftOption=ref();
const RightOption=ref();
const leftButtonOption=ref();
const RightButtonOption=ref();


interface propsDialog{
    sender?:boolean,
    errorIf?:boolean,
    value?:string;
}

const props=withDefaults(defineProps<propsDialog>(),{
    sender:false,
    errorIf:false,
    value:'输入中...'
});

function optionCheck(){
    appear.value=!appear.value
}

function handleDisappear(event:Event){
    if(leftOption.value && leftButtonOption.value){
        if(!leftOption.value.contains(event.target) && !leftButtonOption.value.contains(event.target)){
            appear.value=false;
        }
    }

    if(RightOption.value && RightButtonOption.value){
        if(!RightOption.value.contains(event.target) && !RightButtonOption.value.contains(event.target)){
            appear.value=false;
        }
    }
}


async function audioPlay(content:string){
    if(audioManager.getCurrentContent()===content && audioManager.getIsPlaying()){
        audioManager.stop()
    }else{
        await audioManager.play(content);
    }
}

onMounted(()=>{
    document.addEventListener('click',handleDisappear)
});

onUnmounted(()=>{
    document.removeEventListener('click',handleDisappear)
});

</script>

<style>
.functionOption{
    display: flex;
    align-items: center;
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;


}

.appear{
    opacity: 1!important;
    user-select: all!important;
    pointer-events: all!important;
}


.dialogOption{
    
    color: rgba(0, 0, 0, 0.6);
    padding: 2px;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right:3px;
    font-size: 120%;

    display: flex;
    flex-direction: row;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);

    transition: all 0.3s ease;
    opacity: 0;
    user-select: none;
    pointer-events: none;

}

.dialogOptionBoard{
    background: rgba(255, 255, 255, 0.6);
    padding: 1px;
    margin-bottom: 10px;
    border-radius: 5px;
    width: 3%;
    text-align: center;
    font-size: 80%;
    transition: all 0.3s ease;
    opacity: 0;
    cursor: pointer;
}

.dialogOptionBoard:hover{
    background: rgba(255, 255, 255, 0.3);
}


.Dialogcontainer{
    display: flex;
    word-break: break-all;
    align-items: end;
    border-radius: 10px;
}

.Dialogcontainer:hover .dialogOptionBoard{
    opacity: 1;
}

.Dialogcontainer:hover{
    background-color: rgb(0, 0, 0,0.1);
}

.leftContainer{
    justify-content: left;
}

.rightContainer{
    justify-content: right;
}

.dialogBoard{
    display: inline-block;
    max-width: 75%;
    border-radius: 5px;
    font-size: 90%;
    font-weight: 500;
    padding: 10px;
    margin: 10px;
    
}

.leftForm{
    background-color: rgb(255, 255, 255);
    
}

.rightForm{
    background-color: rgb(4, 255, 0);
    
}

.error{
    opacity: 0.5;
    color: rgb(194, 14, 14);
}
</style>